<template>
  <view class="register">
    <view class="titHead" @click="tupic">
      <image :src="icon" mode=""></image>
    </view>
    <!-- 手机号 -->
    <view class="phone">
      <view class="picon">
        <!-- <image src="../../static/icons/mine-active.png" mode=""></image> -->
      </view>
      <input
        type="text"
        name="username"
        placeholder="请输入电话号码"
        v-model="username"
      />
    </view>

    <!-- 密码 -->
    <view class="phone">
      <view class="picon">
        <!-- <image src="https://img1.baidu.com/it/u=429171171,1558663938&fm=26&fmt=auto" mode=""></image> -->
      </view>
      <input
        type="password"
        name="password"
        placeholder="请输入登录密码"
        v-model="password"
      />
    </view>

    <!-- 用户名 -->
    <view class="phone">
      <view class="picon">
        <!-- <image src="http://jinglins.gitee.io/leju/static/img/tel.e3e06f16.png" mode=""></image> -->
      </view>
      <input type="text" name="phone" placeholder="请输入用户名" v-model="phone" />
    </view>
    <!-- 昵称 -->
    <view class="phone">
      <view class="picon">
        <!-- <image src="https://img0.baidu.com/it/u=2047586621,4226957915&fm=26&fmt=auto" mode=""></image> -->
      </view>
      <input
        type="text"
        name="nickname"
        placeholder="请输入昵称"
        v-model="nickname"
      />
    </view>
    <!-- 获取验证码 -->
    <view class="phone">
      <view class="picon">
        <!-- <image src="https://img0.baidu.com/it/u=2047586621,4226957915&fm=26&fmt=auto" mode=""></image> -->
      </view>
      <input
        type="text"
        name="yanzhengma"
        placeholder="请输入验证码"
        v-model="yanzhengma"
      />
    </view>
    <!-- 按钮 -->
    <button type="default" class="butt" @click="xfqyyds">注 册 账 号</button>
    <!-- 协议 -->
    <view class="agreement">
      完成注册即代表您同意 <strong class="agecolor"> 用户协议</strong> 和
      <strong class="agecolor"> 隐私政策 </strong>
    </view>
    <!-- 立即登录 -->
    <view class="login" @tap="goLogin"> 已有账号 去登录>>>> </view>
  </view>
</template>

<script>
	import {
		bufan
	} from '../../api/bufan.js'
	// import {gengxin} from '../../api/modification/modification.js'
import { zuceyemian } from "../../api/register/register.js";
export default {
  data() {
    return {
      icon: "../../static/icons/alipay.png",
			phone:'',
			password :'',
			username:'',
			nickname:'',
			yanzhengma:''
    };
  },
  methods: {
    // 点击跳转登录页
    goLogin() {
      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
    // 点击上传头像
    tupic() {
		var that = this;
      uni.chooseImage({
        sizeType: ["original"],
        sourceType: ["album"],
        success(res) {
          console.log(res.tempFilePaths);
		  
          uni.uploadFile({
			  url: bufan + `/lejuClient/login/uploadAvatar`,
			  filePath: res.tempFilePaths[0],
			  name: 'file',
			  success(res) {
			  	console.log(res)
			  	that.icon = JSON.parse(res.data).data.fileUrl
			  }
		  })
        },
      });
    },
	// 点击注册账号
	xfqyyds(){
		zuceyemian({
			  "icon": this.icon,
			  "phone": this.phone,
			  "nickname": this.nickname,
			  "password": this.password,
			  "username": this.username,
		}).then(res=>{
			console.log(res)
		})
	}
  },
};
</script>

<style lang="less" scoped>
.register {
  width: 100%;
  height: 100vh;
  background-color: #f4e8ab;
  padding: 30rpx 106rpx 0;
  box-sizing: border-box;

  // 注册二字
  .titHead {
    width: 160rpx;
    height: 160rpx;
    text-align: center;
    line-height: 160rpx;
    background-color: red;
    margin: 0 auto 60rpx;
    border-radius: 50%;
    border-color: #ff0000;

    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  // 手机号
  .phone {
    width: 100%;
    height: 76rpx;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 40rpx;
    background-color: #dadcdb;

    .picon {
      width: 32rpx;
      height: 32rpx;
      margin: 0 30rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  // 大按钮
  .butt {
    color: #fff;
    background-color: #354e44;
    margin-bottom: 30rpx;
  }

  // 协议
  .agreement {
    margin-bottom: 100rpx;
    font-size: 24rpx;
    color: #a7a7a7;

    .agecolor {
      color: #015000;
    }
  }

  // 立即登录
  .login {
    width: 100%;
    text-align: center;
    color: #354e44;
    font-size: 40rpx;
    font-weight: 700;
  }
}
</style>
